<template>
  <div class="block">
    <el-container>
      <div class="el-main">
        <div class="analysis-box">
          <div class="analysis-query">
            <el-select v-model="queryData.stationName" placeholder="请选择站点" style="width: 140px" class="filter-item">
              <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
            </el-select>
            <el-input v-model.trim="queryData.trackNo" placeholder="请输入股道名称" style="width: 140px" class="filter-item" />
            <el-date-picker :clearable="false" v-model="value1" type="daterange" style="width: 250px" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" placement="bottom-start"></el-date-picker>
            <!-- <el-date-picker :clearable="false" v-model="queryData.endTime" type="date" style="width: 140px" :picker-options="pickerOptions" placeholder="选择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" placement="bottom-start"></el-date-picker> -->
            <el-button type="success" class="reset" @click="reset">重置</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </div>
          <el-table class="analysis-table" v-loading="listLoading" :data="rcvTableData" border height="600">
            <el-table-column label="序号" prop="id" align="center" width="80">
              <template slot-scope="scope">
                <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车站名称" prop="stationNoName" align="center"></el-table-column>
            <el-table-column label="股道名称" prop="trackNoName" align="center"></el-table-column>
            <el-table-column label="车辆数" prop="storageCount" align="center"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog title="机车详细信息" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" :close-on-click-modal="false">
          <el-table class="analysis-table" :data="detailData" border height="600" :cell-style="{ color: '#000' }" :header-cell-style="{ color: '#000' }" :key="tableKey">
            <el-table-column label="车号" prop="ch" width="80px" align="center"></el-table-column>
            <el-table-column label="股道名称" prop="gdName" align="center"></el-table-column>
            <el-table-column label="车种" prop="type" align="center"></el-table-column>
            <el-table-column label="发站名" prop="fzm" align="center"></el-table-column>
            <el-table-column label="到站名" prop="dzm" align="center"></el-table-column>
            <el-table-column label="到达时间" prop="arriveTime" align="center"></el-table-column>
          </el-table>
        </el-dialog>
        <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
      </div>
    </el-container>
  </div>
</template>

<script>
import { getStationNames } from '@/api/dataQuery'
import { getTechnologicalTask } from '@/api/statistics'
import { getTechnologicalTaskList } from './api.js'
import dayjs from 'dayjs'
import './index.scss'
import { color } from 'd3'
export default {
  data() {
    return {
      queryData: {
        stationName: '',
        trackNo: '',
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59')
      },
      value1: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      listLoading: false,
      dialogVisible: false,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailData: [],
      stationNameOptions: [],
      rcvTableData: []
    }
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    handleView(data) {
      let newobj = {
        stationNoName: data.stationNoName,
        vehicleNumbers: data.vehicleNumbers
      }
      getTechnologicalTaskList(newobj).then(res => {
        if (res.code == 0) {
          this.detailData = res.data
          // console.log(this.detailData, 'this.detailData')
        } else {
          this.detailData = []
          this.$message(res.msg)
        }
      })
      this.dialogVisible = true
    },
    startChange(val) {
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 23:59:59'
    },

    getTableData(newObj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newObj
      }
      getTechnologicalTask(obj).then(res => {
        if (res.code == 0) {
          this.rcvTableData = res.data.records
          this.total = res.data.total
        } else {
          this.rcvTableData = []
          this.total = 0
          this.$message(res.msg)
        }
      })
    },
    getAllStationNames() {
      this.stationNameOptions = []
      getStationNames().then(res => {
        if (res.code == 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newobj = this.queryData
          this.getTableData(newobj)
        } else {
          this.listLoading = true
          this.$message('暂无数据')
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      this.queryData.trackNo = ''
      this.currentPage = 1
      this.pageSize = 10
      this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]
      this.getTableData(this.queryData)
    },
    search() {
      this.getTableData(this.queryData)
      // this.getTechnologicalTaskInfo()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // this.getTechnologicalTaskInfo()
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      // this.getTechnologicalTaskInfo()
      this.getTableData(this.queryData)
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '../style.scss';
</style>
